<template>
  <div class="container bg-gray">
    <div class="text-center fz28 txt999 p30 noinvoice-area" v-if="loaded&&!hasRows">
       
      <img src="../../assets/imgs/other/noinvoice@2x.png" alt="" class="noinvoice-img">
      <div class="noinvoice-txt">
        您还没有任何发票哦
      </div>
    </div>
    <template v-else-if="loaded">
      <div v-for="(items,month) in list" :key="month">
        <div class="month">
          {{month}}月
        </div>
        <div class="list-items">
          <div class="list-item" v-for="item in items" :key="item.id" @click="toggleItem(item)">
            <div class="flex">
              <!-- <img src="../../assets/icons/bill/selected@2x.png" v-if="item.selected" alt="" class="togglebtn selected">
              <img src="../../assets/icons/bill/notselected@2x.png" v-else alt="" class="togglebtn selected"> -->
              <div class="flex-con">
                <div class="record-item time-item">{{item.receiveTime|parseTime}}</div>
                <div class="record-item one-line" v-for="(jtem,jindex) in item.items" :key="jindex">{{jtem.title}}</div>
                <div class="invoice-money">{{item.money}}元</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- <div style="height:0.6667rem;"></div>
    <div class="footer-nav-before"></div>
    <div class="footer-nav flex" v-if="loaded&&hasRows">
      <div class="selectall flex" @click="toggleSelectAll">
        <img src="../../assets/icons/bill/selected@2x.png" v-if="selectAll" alt="" class="togglebtn selected">
        <img src="../../assets/icons/bill/notselected@2x.png" v-else alt="" class="togglebtn selected"> 全选
      </div>
      <div class="flex-con"></div>
      <div class="next-btn" :class="{'disabled-btn':!hasSelected}" @click="gotoNext">
        下一步
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: {},
      selectAll: false,
      hasRows: false,
      loaded: false,
      hasSelected: false
    };
  },
  created() {
    this.showLoading();
    this.$get("/api/user/invoice/canopenlist")
      .then(data => {
        if (!this.loaded) {
          this.loaded = true;
        }
        let map = {};
        data.forEach(item => {
          if (!this.hasRows) {
            this.hasRows = true;
          }
          if (!map[item.month]) {
            map[item.month] = [];
          }
          item.selected = false;
          map[item.month].push(item);
        });
        this.list = map;
        this.hideLoading();
      })
      .catch(_ => {
        this.hideLoading();
      });
  },
  methods: {
    toggleSelectAll() {
      this.selectAll = !this.selectAll;
      for (let key in this.list) {
        let items = this.list[key];
        items.forEach(b => {
          b.selected = this.selectAll;
        });
      }
      this.hasSelected = this.selectAll;
    },
    toggleItem(item) {
      this.$router.push("/invoice?ids=" + item.id + "&money=" + item.money);
      return;
      // item.selected = !item.selected;
      // let selectall = true;
      // let hasSelected = false;
      // for (let key in this.list) {
      //   let items = this.list[key];
      //   items.forEach(b => {
      //     selectall = selectall && b.selected;
      //     if (!hasSelected && b.selected) {
      //       hasSelected = true;
      //     }
      //   });
      // }
      // this.hasSelected = hasSelected;
      // this.selectAll = selectall;
    },
    gotoNext() {
      if (this.hasSelected) {
        let ids = [];
        let money = 0;
        for (let key in this.list) {
          let items = this.list[key];
          items.forEach(b => {
            if (b.selected) {
              ids.push(b.id);
              money += b.money;
            }
          });
        }
        this.$router.push("/invoice?ids=" + ids.join(",") + "&money=" + money);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.month {
  padding: 0.46rem 0.4133rem 0.3867rem 0.4133rem;
  font-size: 0.32rem;
  color: #333333;
}
.noinvoice-area {
  img {
    width: 2.36rem;
    height: 2.36rem;
    margin-bottom: 0.6667rem;
    margin-top: 1.5733rem;
  }
  font-size: 0.4rem;
  text-align: center;
}

.togglebtn {
  width: 0.44rem;
  height: 0.44rem;
  margin-right: 0.6267rem;
}

.list-items {
  font-size: 0.3467rem;
  color: #333333;
  width: 9.48rem;
  margin: 0 auto;
  .list-item {
    padding: 0.3867rem 0.4133rem;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.2933rem;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .record-item {
    padding-bottom: 0.4267rem;
    &:last-child {
      padding-bottom: 0;
    }
    padding-left: 0.5333rem;
    background-image: url("../../assets/icons/goods/gt-blue@2x.png");
    background-repeat: no-repeat;
    background-size: 0.3067rem 0.3067rem;
    background-position: left 0.015rem;
  }
  .time-item {
    color: rgba(51, 51, 51, 0.58);
  }
  .invoice-money {
    font-size: 0.3733rem;
    text-align: right;
    color: #f02320;
    font-weight: bold;
  }
}

.footer-nav-before {
  height: 1.2133rem;
}

.footer-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2133rem;
  background-color: #fff;
  font-size: 0.3733rem;
  .togglebtn {
    margin-right: 0.2667rem;
  }
  .selectall {
    padding: 0 0.4133rem;
  }
  .next-btn {
    width: 3.1467rem;
    height: 1.2133rem;
    line-height: 1.2133rem;
    background-color: #e82f24;
    text-align: center;
    font-size: 0.4rem;
    color: #ffffff;
  }
}
</style>
